<style lang="less" scoped>
@import "../assets/css/variable.less"; // less变量

.pay_course {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

  header {
    width: 100%;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 32px;
    color: #333333;
    background: #fff;
    position: relative;

    .icon-box {
      width: 80px;
      height: 88px;
      position: absolute;
      left: 0px;
      top: 0px;
      .flex_center();
    }
    .share{
      position: absolute;
      top: 22px;
      right: 30px;
      width: 40px;
      height: 40px;
      .flex_center();
    }
  }

  .content {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    background: #F9F9F9;
    // position: fixed;
    // top: 0;
    // left: 0;
    // z-index: 10;
    // padding-top: 88px;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 130px);
    /*兼容 IOS<11.2*/
    padding-bottom: calc(env(safe-area-inset-bottom) + 130px);

    /*兼容 IOS>11.2*/
    .loading {
      width: 100%;
      height: 500px;
      display: flex;

      >i {
        width: 100px;
        height: 100px;
        margin: auto;
        background: url('../assets/images/refresh.png') center/100% no-repeat;
        animation: load .5s ease-in-out 0s infinite;

        @keyframes load {
          0% {
            transform: rotateZ(0deg);
          }

          100% {
            transform: rotateZ(360deg);
          }
        }
      }
    }

    >.inner {
      width: 100%;
      min-height: 100%;
      overflow: hidden;
      position: relative;

      .banner {
        width: 100%;
        height: 427px;
        position: relative;
        background: #fff;

        >div {
          height: 47px;
          position: absolute;
          left: 30px;
          bottom: 30px;
          background: rgba(0, 0, 0, 0.4);
          border-radius: 24px;
          padding: 0 12px;
          font-size: 22px;
          .flex_left();
          color: #fff;

          >svg {
            width: 32px;
            height: 32px;
          }

          >span {
            margin-left: 10px;

            &:nth-child(3) {
              margin-left: 10px;
              padding-left: 10px;
              border-left: 1px solid #fff;
            }
          }
        }
      }

      .title {
        width: 100%;
        background: #fff;
        display: flex;
        justify-content: start;
        flex-direction: column;
        padding: 20px 30px;

        .name {
          width: 100%;
          font-size: 36px;
          color: #333;
          font-weight: bold;
          .text_overflow();
          margin-bottom: 6px;
        }

        .tags {
          width: 100%;
          height: 38px;
          .flex_left();
          overflow-x: scroll;

          >li {
            height: 38px;
            line-height: 38px;
            background: rgba(91, 118, 255, 0.1);
            border-radius: 6px;
            color: #5B76FF;
            font-size: 22px;
            margin-left: 10px;
            white-space: nowrap;
            padding: 4px 8px;

            &:nth-child(1) {
              margin-left: 0;
            }
          }
        }

        .sub_name {
          width: 100%;
          font-size: 24px;
          color: #999;
          margin-top: 6px;
          .flex_left();

          >svg {
            width: 34px;
            height: 32px;
            flex: none;
          }

          >span {
            margin-left: 10px;
            .text_overflow();
          }
        }
      }

      .teacher {
        height: 130px;
        padding: 10px 10px 0;
        display: flex;
        box-sizing: content-box;
        overflow-x: scroll;

        .teacher_inner {
          width: 100%;
          height: 100%;
          flex: none;

          &:not(:nth-child(1)) {
            margin-left: 12px;
          }

          &.mutil_teacher {
            width: 90%;
          }
        }
      }

      .detail {
        // height: calc(100vw - 20px);
        background: #fff;
        margin: 10px 10px 0;
        overflow: hidden;
        transition: height .3s;
        position: relative;
        border-radius: 8px;
        padding: 10px 0;

        .detail_inner {
          width: 100%;
          // height: 1000px;
          box-sizing: content-box;

          &.detail_inner_padding {
            padding-bottom: 80px;
          }
        }

        .open_more {
          width: 100%;
          height: 80px;
          position: absolute;
          left: 0;
          bottom: 0;
          .flex_center();
          align-items: flex-end;
          background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 32%, #FFFFFF 100%);

          .text {
            .flex_center();
            margin-bottom: 10px;

            span {
              font-size: 28px;
              color: #5B76FF;
            }

            i {
              width: 26px;
              height: 26px;
              margin-left: 8px;
              background: url('../assets/images/oepn_more.png') center/100% no-repeat;
              transition: transform .3s .5s;
              transform: rotateX(0deg);

              &.i_rotate {
                transform: rotateX(180deg);
              }
            }
          }
        }
      }

      .course_list_wrap {
        margin: 10px;
      }
    }
  }

  .bottom_btn {
    width: 100%;
    height: 130px;
    background: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 20;
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px 0px #EEEEEE;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: content-box;
    padding: 17px 32px;
    box-sizing: border-box;
    .flex_left();

    .collect_area {
      width: 48px;
      height: 80%;
      .flex_col ();
      align-items: center;
      flex: none;
      position: relative;

      >i {
        width: 48px;
        height: 48px;
        background: url('../assets/images/zxjtqh/collect.png') center/100% no-repeat;

        &.checked {
          background: url('../assets/images/zxjtqh/collect_checked.png') center/100% no-repeat;
        }
      }

      >span {
        color: #27344B;
        font-size: 20px;
        white-space: nowrap;
      }

      &:after {
        content: '';
        width: 1px;
        height: 30px;
        background: #EEE;
        display: block;
        position: absolute;
        right: -38px;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .btn_area {
      flex: 1;
      height: 100%;
      margin-left: 76px;

      >.free {
        width: 100%;
        height: 100%;
        background: #5B76FF;
        border-radius: 8px;
        display: flex;

        span {
          margin: auto;
          font-size: 32px;
          color: #eee;
        }
      }

      >.pay {
        width: 100%;
        height: 100%;

        >.buy {
          width: 100%;
          height: 100%;
          background: #5B76FF;
          border-radius: 8px;
          display: flex;

          span {
            margin: auto;
            font-size: 32px;
            color: #eee;
          }
        }

        >.unbuy {
          width: 100%;
          height: 100%;

          .un_price {
            width: 100%;
            height: 100%;
            background: #5B76FF;
            border-radius: 8px;
            display: flex;

            span {
              margin: auto;
              font-size: 32px;
              color: #eee;
            }
          }

          .price {
            width: 100%;
            height: 100%;
            .flex_between();

            .left {
              height: 100%;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              letter-spacing: -1px;

              .span1 {
                font-size: 24px;
                color: #FF0000;
                span{
                  font-size: 48px;
                }
              }

              .span2 {
                color: #999999;
                font-size: 20px;
                margin-left: 5px;
                margin-top: 15px;
                text-decoration: line-through;
              }
            }

            .right {
              width: 262px;
              height: 100%;
              background: #5B76FF;
              border-radius: 8px;
              display: flex;

              span {
                margin: auto;
                font-size: 32px;
                color: #eee;
              }
            }
          }
        }
      }
    }
  }

  .lectuer-pop-box {
    width: 100%;
    max-height: 600px;
    background-color: #F9F9F9;
    padding: 10px 10px  50px;

    header {
      width: 100%;
      height: 60px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-right: 20px;
      }
  .lectuer-info{
    width: 100%;
    background: #FFFFFF;
    border-radius: 8px;
    margin-top: 10px;
    line-height: 40px;
    padding: 20px;
    font-size: 30px;
    font-weight: 400;
    color: #333333;
    line-height: 42px;
  }
    .lectuer_card {
      width: 100%;
      height: 100%;
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      margin: 0 auto;
      .flex_center();

      .lectuer_avatar {
        width: 85px;
        height: 85px;
        flex: none;
        border-radius: 50%;
        overflow: hidden;

        >img {
          width: 100%;
          height: 100%;
          font-size: 0;
        }
      }

      .lectuer_detail {
        width: 0;
        flex: 1;
        height: 85px;
        margin: 0 20px;
        .flex_col();
        justify-content: center;

        .info {
          width: 100%;
          flex: none;
          .flex_left();

          >span {
            color: #333;
            font-size: 32px;
            flex: none;

            &:nth-child(2) {
              color: #666;
              font-size: 24px;
              margin-left: 10px;
              flex: 1;
              .text_overflow();
            }
          }
        }

        .num {
          width: 100%;
          font-size: 26px;
          color: #999;
          margin-top: 12px;
          .text_overflow();
        }
      }
    }
  }
}
</style>

<template>
  <div class="pay_course">
    <!-- 头部 -->
    <header>
      <div class="icon-box" @click="back()">
        <van-icon name="arrow-left" size="1.2rem" color="#333333" />        
      </div>
      <p>课程简介</p>
      <!-- <van-icon name="warning-o"  size="1.2rem" color="#333333"  /> -->
      <img  class="share"  v-if="isShare" src="@/assets/images/share.png" @click="clickShare" alt="">
    </header>
    <main class="content" ref="content" v-if="courseInfo">
      <div class="loading" v-if="loading"><i></i></div>
      <ul class="inner" ref="inner" v-else>
        <div class="banner" :style="{ background: `url('${courseInfo.introImgUrl}?x-oss-process=image/resize,m_fixed,h_428,w_750') center/contain no-repeat` }">
          <div>
            <svg t="1669806423980" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="2699" width="32" height="32">
              <path
                d="M512 192c156.448 0 296.021333 98.730667 418.410667 291.605333a52.938667 52.938667 0 0 1 0 56.789334C808.021333 733.269333 668.448 832 512 832c-156.448 0-296.021333-98.730667-418.410667-291.605333a52.938667 52.938667 0 0 1 0-56.789334C215.978667 290.730667 355.552 192 512 192z m0 128c-106.037333 0-192 85.962667-192 192s85.962667 192 192 192 192-85.962667 192-192-85.962667-192-192-192z m0 320c70.688 0 128-57.312 128-128s-57.312-128-128-128-128 57.312-128 128 57.312 128 128 128z"
                p-id="2700" fill="#ffffff"></path>
            </svg>
            <span>{{ courseInfo.pv }} 观看</span>
            <span v-if="courseInfo.totalLessonNum">共{{ courseInfo.totalLessonNum }}节</span>
          </div>
        </div>
        <div class="title">
          <div class="name">{{ courseInfo.title }}</div>
          <ul class="tags" v-if="courseInfo.tags.length">
            <li v-for="(item, index) in courseInfo.tags" :key="index">{{ item }}</li>
          </ul>
          <div class="sub_name">
            <svg t="1669807291135" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="3743" width="32" height="32">
              <path
                d="M512 0C228.430769 0 0 228.430769 0 512s228.430769 512 512 512 512-228.430769 512-512S795.569231 0 512 0z m0 945.230769C271.753846 945.230769 78.769231 752.246154 78.769231 512S271.753846 78.769231 512 78.769231s433.230769 192.984615 433.230769 433.230769-192.984615 433.230769-433.230769 433.230769z"
                p-id="3744" fill="#999999"></path>
              <path
                d="M716.8 330.830769l-208.738462 248.123077c-15.753846 15.753846-43.323077 19.692308-59.076923 7.876923L299.323077 472.615385c-15.753846-11.815385-43.323077-7.876923-55.138462 7.876923-11.815385 15.753846-7.876923 43.323077 7.876923 55.138461l149.661539 114.215385c19.692308 15.753846 47.261538 23.630769 74.830769 23.630769 35.446154 0 70.892308-15.753846 94.523077-43.323077l208.738462-248.123077c15.753846-15.753846 11.815385-43.323077-3.938462-55.138461-19.692308-15.753846-43.323077-15.753846-59.076923 3.938461z"
                p-id="3745" fill="#999999"></path>
            </svg>
            <span>{{
              ['永久有效', `课程自购买起${courseInfo.fixedDay}天内有效`,
                `有效期至${courseInfo.fixedDate}`][courseInfo.validType]
            }}</span>
          </div>
        </div>
        <div class="teacher" v-if="courseInfo.lectuers.length">
          <div class="teacher_inner" :class="{ mutil_teacher: courseInfo.lectuers.length > 1 }"
            v-for="(item, index) in courseInfo.lectuers" :key="index" @click="handleShowPopup(item)">
            <LectuerCard :info="item" />
          </div>
        </div>
        <div class="detail" v-if="courseInfo.intro">
          <div class="detail_inner" :class="{ detail_inner_padding: showOpenMore }" ref="detail_inner"
            v-html="courseInfo.intro"></div>
          <div class="open_more" v-if="showOpenMore" @click="clickOpenMore">
            <div class="text">
              <span>{{ isOpenDetail? '收起': '查看' }}更多</span>
              <i :class="{ i_rotate: isOpenDetail }"></i>
            </div>
          </div>
        </div>
        <div class="course_list_wrap">
          <CourseList :courseInfo="courseInfo" v-if="courseInfo.lessons.length" formPage='courseDetail' />
        </div>
      </ul>
    </main>
    <footer class="bottom_btn" v-if="courseInfo">
      <div class="collect_area" @click="handleCollect">
        <i :class="{ checked: courseInfo.love }"></i>
        <span>{{ courseInfo.love ? '已收藏' : '收藏' }}</span>
      </div>
      <div class="btn_area">
        <div class="free" v-if="!courseInfo.priceType" @click="handleBuyCourse">
          <span v-if="courseInfo.haveBuy">已订阅，立即观看</span>
          <span v-else>免费订阅</span>
        </div>
        <div class="pay" v-else>
          <div class="buy" v-if="courseInfo.haveBuy" @click="handleBuyCourse"><span>已购买，立即观看</span></div>
          <div class="unbuy" v-else>
            <div class="price" v-if="courseInfo.buyPrice">
              <div class="left">               
                <span class="span1">￥<span>{{ courseInfo.buyPrice }}.00</span></span>
                <span class="span2" v-if="courseInfo.linePrice">￥{{ courseInfo.linePrice }}.00</span>
              </div>
              <div class="right" @click="handleBuyCourse"><span>立即购买</span></div>
            </div>
            <div class="un_price" v-else @click="handleBuyCourse"><span>立即购买</span></div>
          </div>
        </div>
      </div>
    </footer>
    <van-popup v-model="vantPopupShow" :close-on-click-overlay="popupObj.isPopupGlobalMask" :round="popupObj.round"
      :position="popupObj.position" overlay-class="popClass" :overlay='popupObj.isOverlay'
      :style="{ width: popupObj.width, height: popupObj.height ,left:$store.state.isMobile ? 0 : 'calc(50% - 200px)' }" @click-overlay="clickVanOverlay">
      <div class="lectuer-pop-box">
        <header>
          <van-icon name="cross" @click="clickClosePop" color ="#444444"  size="1.2rem"/>
        </header>
        <div class="lectuer_card">
          <div class="lectuer_avatar">
            <img :src="lectuerItem.headImg" alt="">
          </div>
          <div class="lectuer_detail">
            <div class="info"><span>{{ lectuerItem.name }}</span><span>{{ lectuerItem.positional }}</span></div>
            <div class="num" v-if="lectuerItem.careerCode">执业信息：{{ lectuerItem.careerCode }}</div>
          </div>
        </div>
        <div class="lectuer-info">{{lectuerItem.intro }}</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import LectuerCard from '../components/zxjtqh/LectuerCard.vue';//讲师组件
import CourseList from '../components/zxjtqh/CourseList.vue';//课节列表
import store from "../store/index";
import { subscribeCourse, courseCollect ,dotNum} from '@/util/api.js'
export default {
  name: "courseDetail",
  components: {
    LectuerCard,
    CourseList,
  },
  data() {
    return {
      loading: false,
      //linePrice  划线价格 haveBuy  是否购买 buyPrice 购买价格 priceType 0-免费，1-付费
      courseInfo: null, // 课程简介信息
      showOpenMore: false, // 是否显示展开更多标识
      isOpenDetail: false, // 打开详情标识
      courseWatchRecord: localStorage.getItem(`${this.$channel}courseWatchRecord`) ? JSON.parse(localStorage.getItem(`${this.$channel}courseWatchRecord`)) : {},
      vantPopupShow: false,
      isPopupCom: '',
      lectuerItem: '',
      popupObj: {
        'position': '',
        'width': '',
        'height': '',
        'isOverlay': true,
        'round': false,//圆角
        'isPopupGlobalMask': true,//蒙层是否点击消失
      },
      isShare:false,
    }
  },
  beforeRouteEnter(to, from, next) {
    // 跳转精品课程列表手机验证检查（区分platform: wx web app）
    const sessionData = window.sessionStorage.getItem(`${window.channel}CourseSms`)
    if (to.fullPath.indexOf('/neworg1/courseDetail') !== -1 || to.fullPath.indexOf('/zxjtqh/courseDetail') !== -1) {/* neworg1 zxjtqh */
      if (sessionData || store.state.userInfo.hasBindMobile) {
        next();
      } else {
        if (window.terminal.isZxjtqhApp) {
          if (store.state.isYk) {
            console.log('进入课程详情，platform: app', '游客');
            fun.gotoLogin()
          } else {
            next();
          }
        } else if (window.terminal.weixin) {//微信无游客
          console.log('进入课程详情，platform: wx');
          sessionData ? next() : store.commit('setGlobalPopupInfo', {
            ...store.state.globalPopupInfo,
            type: 0,
            show: true,
            next,
            from,
          })
        } else {
          console.log('进入课程详情，platform: web',);
          sessionData ? next() : store.commit('setGlobalPopupInfo', {
            ...store.state.globalPopupInfo,
            type: 0,
            show: true,
            next,
            from,
          })
        }
      }
    }
  },
  created() {
    window.terminal.isZxjtqhApp && (this.isShare = true) ;
    dotNum(`courseDetail_${this.$route.query.courseId}`)
  }, 
  async mounted() {
    // 获取课程简介
    await this.getCourseInfo();
    // 计算详情区域是否显示展开更多
    this.handelDetailInfoOpenMore();
    window['function70102'] = (res)=>{//付费课程购买成功之后的回调funcNo"：70102
      if(res.funcNo == '70102'){
        console.log(res,'接收到app770102 回调消息');
        if(res.courseId == this.$route.query.courseId){
            //this.courseInfo.haveBuy = true;
            window.location.reload(true)
        }
      }
    }
  },
  methods: {
    clickShare(){
      const {shareImgUrl,shareTitle,shareDesc,title,imgUrl} = this.courseInfo;
      fun.zxjtqhShare('liveRoom',"22,23,24,1",shareTitle||title,window.location.href,shareDesc||'欢迎观看本次课程',shareImgUrl|| imgUrl)
    },
    clickClosePop(){
      this.vantPopupShow = false
    },
    back() {
      const {refer} = this.$route.meta;
      if(refer.includes('niceCourse')){
        this.$router.replace(`/${this.$channel}/niceCourse`);
      }else{
        this.$router.replace(`/${this.$channel}/home`);
      }      
    },
    // 获取courseDetail数据
    getCourseInfo() {
        this.loading = true;
        this.$http.get("/h5live/course/getCourseInfo", {
          params: {
            courseId: this.$route.query.courseId,
          },
        }).then(res => {
          this.loading = false;
          if (res.data.code === "000000") {
            // 富文本图片超宽处理
            res.data.data.intro.replace(
              /<img/g,
              "<img style='max-width:100%;height:auto;'"
            );
            this.courseInfo = res.data.data;
          } else {
          }
        }).catch(err => {
          fun.toastMessage('获取课程明细失败');
          console.error(err);
        });
    },
    // 设置当前讲师数据
    handleShowPopup(item) {
      this.lectuerItem = item
      this.popupObj = {
        'position': 'bottom',
        'width': this.$store.state.isMobile ?'100%' :'400px',
        'height': 'auto',
        'isOverlay': true,
        'round': true,
        'isPopupGlobalMask': true,
      },
      this.isPopupCom = 'LectuerCard'
      this.vantPopupShow = true
    },
    // 计算详情区域是否显示展开更多
    handelDetailInfoOpenMore() {
      // 判断是否有课程详情区域
      //if (false) return false;
      this.$nextTick(() => {
        const { detail_inner: detailInnerNode } = this.$refs;
        if (detailInnerNode.clientHeight > document.clientHeight) this.showOpenMore = true;
      })
    },
    // 点击展开更多
    clickOpenMore() {
      this.isOpenDetail = !this.isOpenDetail;
      const { detail: detailNode, detail_inner: detailInnerNode } = this.$refs;
      detailNode.style.height = this.isOpenDetail ? detailInnerNode.clientHeight + 'px' : '';
    },
    // 收藏处理
    async handleCollect() {
      if (this.$store.state.isYk) {
          fun.ykDisposeFun();
          return
        }

      const { love ,shelveType} = this.courseInfo;
      if(shelveType == '2'){
        fun.toastMessage('课程已结束');
        return
      }
      const status = love ? 0 : 1;
      const { data: { code } } = await courseCollect(this.$route.query.courseId, status)
      if (code === '000000') {
        this.courseInfo.love = !this.courseInfo.love
      } else {
        console.log('课程收藏error');
        fun.toastMessage('操作失败，请重试');
      }
    },
    linkBackFun() {
      const { lessons  } = this.courseInfo;
      const courseId = this.$route.query.courseId;
      if (this.courseWatchRecord.hasOwnProperty(courseId)) {//跳转上次看过
        const vid = this.courseWatchRecord[courseId]['backId']
        this.$router.push(`/${this.$channel}/liveBack/${vid}?dzhPage=true`);
      } else {//跳转课程第一节
        if (lessons.length) {
          const vid = lessons[0]['vid']
          this.$router.push(`/${this.$channel}/liveBack/${vid}?dzhPage=true`);
        } else {
          fun.toastMessage('当前课程还未更新课节', 2000);
        }
      }
    },
    // 购买课程
    async handleBuyCourse() {
      //priceType  0-免费，1-付费  haveBuy true 购买 false 未购买
      const { priceType, haveBuy ,shelveType } = this.courseInfo;
      if(shelveType == '2'){
        fun.toastMessage('课程已结束');
        return
      }
      if (priceType) {
        if (haveBuy) {//付费已购买
          console.log('付费已购买');
          this.linkBackFun()
        } else {//付费未购买
          console.log('付费未购买');
          if (window.terminal.isZxjtqhApp) {
            //商城页面
            fun.setZxjtqhCacheData(this.$route.query.courseId)
            fun.zxjtqhLinkUrl(`${config.zxjtqhShoppingUrl}?returnUrl=${location.href}&courseId=${this.$route.query.courseId}&topmargin=${window.topmargin}`,'SC');
          } else {
            // 拉起app/app下载
            window.open('https://app.cfc108.com:7443/download.html');
          }
        }
      } else {//免费
        if (this.$store.state.isYk) {
          fun.ykDisposeFun();
        } else {
          if (haveBuy) {//免费已购买
            console.log('免费已购买');
            this.linkBackFun()
          } else {//免费未购买
            console.log('免费未购买');
            const { data: { code, data } } = await subscribeCourse(this.$route.query.courseId);
            if (code === '000000' && data) {
              fun.toastMessage('订阅成功', 2000);
              this.courseInfo.haveBuy = true
            } else {
              console.log('订阅接口error');
            }
          }
        }
      }
    }
  }
};
</script>
